<template>
	<view class="content">
		<swiper :indicator-dots="false" :vertical="true" :autoplay="false" :duration="1000" class="swiper" @change="change" @touchstart="touchStart" @touchend="touchEnd">
			<swiper-item v-for="(item,index) of list" :key="index" >
				<view  class="swiper-item">
					<myVideo :video='item' ref="player" :index='index'></myVideo>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import { nextTick } from "vue"
import myVideo from '../../compontents/myVideo.vue'
	var time = null
	export default {
		data() {
			return {
				list:[],
				pageStartY:0,
				pageEndY:0,
				page:0
			}
		},
		components:{
			myVideo
		},
		onLoad() {
		  this.setData()
		},
		onReady() {
			
		},
		methods: {
			setData(){

				uni.request({
					url: 'https://bdb24c6d-8c19-4f80-8e7e-c9c9f037f131.bspapp.com/video',
					method: 'POST',
					data: {
						info: 'get_video',
					},
					success: res=>{
						uni.hideLoading()
						let msg = res.data.data
						for(let i=0;i<msg.length;i++){
							this.list.push(msg[i])
							// this.list.forEach(item=>{
							// 	item.flag=false
							// })
						}
					},
				})
			},
			change(e){
				clearTimeout(time)
				time = setTimeout(()=>{
					this.page = e.detail.current*1
					if(this.pageStartY > this.pageEndY){
						this.$refs.player[this.page].playVideo()
						this.$refs.player[this.page-1].pauseVideo()
					}
					else{
						this.$refs.player[this.page].playVideo()
						this.$refs.player[this.page+1].pauseVideo()
					}
					this.pageEndY = 0
					this.pageStartY = 0
				},1) 
			},
			touchStart(e){
				this.pageStartY = e.changedTouches[0].pageY
			},
			touchEnd(e){
				this.pageEndY = e.changedTouches[0].pageY
			},
		}
	}
</script>

<style>
	.content{
		width: 100%;
		height:1500rpx;
	}

	.swiper{
		width: 100%;
		height: 100%;
	}
		
		.swiper-item{
			width: 100%;
			height: 100%;
		}
		video{
			width: 100%;
			height: 100%;
		}
</style>
